<!--
 * @Author: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @Date: 2025-07-02 11:02:18
 * @LastEditors: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @LastEditTime: 2025-07-02 16:02:45
 * @FilePath: \keep_motion_manger\src\components\pagination\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="pagination-container">
    <div class="left-section">
      共计{{ total }}条数据
    </div>
    <div class="right-section">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        background
        size="small"
        layout="sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import './index.css';
import { defineProps, defineEmits } from 'vue';

// 定义组件接收的 props
const props = defineProps({
  total: {
    type: Number,
    default: () => 0
  },
  pageSize: {
    type: Number,
    default: () => 10
  },
  currentPage: {
    type: Number,
    default: () => 1
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 50]
  }
});

// 定义组件触发的事件
const emits = defineEmits(['size-change', 'current-change']);

// 处理 pageSize 变化事件
const handleSizeChange = (newSize) => {
  emits('size-change', newSize);
};

// 处理当前页码变化事件
const handleCurrentChange = (newPage) => {
  emits('current-change', newPage);
};
</script>